<template>
    <div  v-if="!isJoin">
        <div class="remote1" v-loading="loading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div class="shade">
                <div class="input-container">
                    <input type="text" v-model="account" placeholder="请输入你的昵称" @keyup.enter="join">
                    <button @click="join">确定</button>
                </div>
            </div>
            <div class="userList" v-if="0">
                <h5>在线用户：{{userList.length}}人</h5>
                <p v-for="v in userList" :key="v.account">
                    {{v.account}}
                    <i v-if="v.account === account || v.account === isCall">
                        {{v.account === account ? 'me' : ''}}
                        {{v.account === isCall ? 'calling' : ''}}
                    </i>
                    <span @click="apply(v.account)" v-if="v.account !== account && v.account !== isCall">呼叫 {{v.account}}</span>
                </p>
            </div>
            <div class="video-container" v-show="isToPeer">
                <div>
                    <video src="" id="rtcA" controls autoplay></video>
                    <h5>{{account}}</h5>
                    <button @click="hangup">hangup</button>
                </div>
                <div>
                    <video src="" id="rtcB" controls autoplay></video>
                    <h5>{{isCall}}</h5>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <div class="box" v-loading="loading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
             <!-- <div id="eagleMapContainer"  title=""> -->
                <div class="videoBox" v-show="isToPeer" id="eagleMapContainer" v-drag>
                    <div class="rtcA" :class="[videobig=='rtcA'?'big':'small']" @click.stop="videobig='rtcA'" :title="videobig=='rtcA'?'':'点击放大'">
                        <video src="" id="rtcA" autoplay poster="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=05b297ad39fa828bce239be3cd1e41cd/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg" muted></video>
                        <!-- <h5>{{account}}</h5> -->
                        <!-- <button @click="hangup">通话挂断</button> -->
                    </div>
                    <div class="rtcB" :class="[videobig=='rtcB'?'big':'small']" @click.stop="videobig='rtcB'" :title="videobig=='rtcB'?'':'点击放大'">
                        <video src="" id="rtcB" autoplay poster="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=0c78105b888ba61ec0eece2f713597cc/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg"></video>
                        <!-- <h5>{{isCall}}</h5> -->
                    </div>
                        <el-button type="danger" icon="el-icon-close" size="mini" class="hangup" @click="hangup" circle title="通话挂断"></el-button>
                <span id="tz" @mousedown.stop="dragEagle" title="拖动调整大小"></span>
                </div>
            <!-- </div> -->
            <div class="left">
                <div class="hede" :title="account">
                    <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                </div>
                <div class="tog">
                    <div class="chat pointer" >
                        <i class="iconfont el-icon-chat-round" v-if="1==2"></i>
                        <i class="iconfont el-icon-chat-line-round" v-else></i>
                    </div>
                    <div class="addressList pointer" @click="info">
                        <i class="iconfont el-icon-user-solid" v-if="1==1"></i>
                        <i class="iconfont el-icon-user" v-else></i>
                    </div>
                    <div class="addressList pointer" @click="info">
                        <i class="iconfont el-icon-setting" v-if="1==1"></i>
                        <i class="iconfont el-icon-s-tools" v-else></i>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="input" @click="info">
                    <!-- <input type="text"> -->
                    <el-input size="mini" placeholder="搜索" v-model="search">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <div class="plus"><i class="el-icon-plus"></i></div>
                </div>
                <div class="lists">
                    <div class="list" v-for="(v,i) in userList" v-bind:key="v.account" @click="target=v" v-if="v.account!=account" :class="[(target &&　target.account==v.account)?'at':'']">
                        <div class="hede">
                            <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                        </div>
                        <div class="title">
                            <div class="name">{{v.account}}<span class="pull-right time">刚刚</span></div>
                            <div class="info">[图片] <span class="pull-right  el-icon-bell"></span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title"><span v-if="target">{{target.account}}</span> <i class="el-icon-more pull-right pointer" @click="info"></i></div>
                <div class="top">
                    <div class="textLists" v-if="target && target.account">
                        <div class="textList" v-for="(v,i) in pageChat[target.account]" v-bind:key="v.account" :class="[v.account==account?'this':'']" >
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <i :class="[v.account==account ? 'el-icon-caret-right' : 'el-icon-caret-left']"></i>
                                {{v.text}}</div>
                        </div>

                    </div>
                </div>
                <div class="bottom">
                    <div>
                        <!-- <i class="el-icon-service"></i> -->
                        <i class="iconfont pull-left el-icon-picture-outline-round pointer" @click="info"></i>
                        <i class="iconfont pull-left el-icon-folder-opened pointer" @click="info"></i>
                        <i class="iconfont pull-left el-icon-chat-dot-round pointer" @click="info"></i>
                        <!-- <i class="iconfont el-icon-camera"></i> -->
                        <i class="iconfont el-icon-s-platform pointer" @click="info"></i>
                        <i class="iconfont el-icon-phone pointer" @click="info"></i>
                        <i class="iconfont el-icon-video-camera-solid pointer" @click="myapply"></i>
                    </div>
                    <el-input type="textarea" resize="none" :rows="4" placeholder="请输入内容" v-model="text"></el-input>
                    <el-button size="mini" plain @click="sendText">发送</el-button>
                </div>
            </div>
        </div>

                    <el-button  plain @click="__createMedia">屏幕测试</el-button>

    </div>
</template>

<script type="text/babel">
  import live from './live.js'

  export default {
    ...live
  }
</script>

<style type="stylesheet/scss" lang="scss" scoped>
  @import './live.scss';
</style>